<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@ page session="false"%>
<html lang="en">
<jsp:include page="header.jsp" flush="true">
	<jsp:param name="pageTitle" value="Sign-Up Meet10" />
</jsp:include>

<script type="text/javascript">
	function test1() {
		$("#email").val("");
		$("#passwd").val("");
		$("#name").val("");
		$("#surname").val("");
		$("#location").val("");
		$("up_usr").submit();
	}

	function test2() {
		$("#email").val("tonguc.catakli@gmail.com");
		$("#passwd").val("rizeli_53");
		$("#name").val("tonguc");
		$("#surname").val("catakli");
		$("#location").val("rize");
		$("up_usr").submit();
	}

	function test3() {
		$("#email").val("tonguc");
		$("#passwd").val("165161");
		$("#name").val("ali");
		$("#surname").val("veli");
		$("#location").val("van");
		$("up_usr").submit();
	}

	function test4() {
		$("#email").val("tonguc.catakli@gmail.com");
		$("#passwd").val("rizeli_53");
		$("#name").val("tonguc");
		$("#surname").val("catakli");
		$("#location").val("");
		$("up_usr").submit();
	}

	function test5() {
		$("#email").val("tonguc.catakli@gmail.com");
		$("#passwd").val("rizeli_53");
		$("#name").val("tonguc");
		$("#surname").val("");
		$("#location").val("rize");
		$("up_usr").submit();
	}

	function test6() {
		$("#email").val("tonguc.catakli@gmail.com");
		$("#passwd").val("rizeli_53");
		$("#name").val("");
		$("#surname").val("catakli");
		$("#location").val("rize");
		$("up_usr").submit();
	}

	function test7() {
		$("#email").val("tonguc.catakli@gmail.com");
		$("#passwd").val("");
		$("#name").val("tonguc");
		$("#surname").val("catakli");
		$("#location").val("rize");
		$("up_usr").submit();
	}

	function test8() {
		$("#email").val("");
		$("#passwd").val("rizeli_53");
		$("#name").val("tonguc");
		$("#surname").val("catakli");
		$("#location").val("rize");
		$("up_usr").submit();
	}
</script>

<style type="text/css">
body {
	padding-top: 40px;
	padding-bottom: 40px;
	background-color: #E8EDED;
}

.upload-button {
	position: relative;
	right: -22px;
}

.file-button {
	position: relative;
	right: -20px;
	margin-top: 35px;
}

.form-horizontal .form-control {
	position: relative;
	height: auto;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding: 10px;
	font-size: 16px;
	/* 	background-color: #44BBF8;
	color: #f05607; */
}

.form-horizontal {
	max-width: 500px;
	padding: 0px;
	margin: 0 auto;
	z-index: 2;
}

.form-control {
	max-width: 330px;
	position: relative;
	height: auto;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.form-group {
	margin-bottom: 0px;
}

.col-sm-2 {
	max-width: 170px;
	color: #f05607;
	/* font-family: "Times New Roman", Times, serif; */
	font-weight: normal;
	font-size: 120%;
}

.bigLogo {
	margin: 0 auto;
	padding-top: 10px;
	padding-bottom: 20px;
}

.btn {
	max-width: 330px;
	background-color: #44BBF8;
	color: #f05607;
	margin: 0 auto;
	margin-top: 15px;
	font-weight: bold;
	border-radius: 6px;
}

.btn:hover {
	background-color: beige;
	color: #f05607;
}
</style>



<center style="margin-top: 100px;">
	<img src="http://i.imgur.com/FfcMAl8.png" class="bigLogo">
</center>
<form:form class="form-horizontal" enctype="multipart/form-data"
	method="POST" modelAttribute="user" id="up_usr">

	<div class="form-group">
		<label class="col-sm-2 control-label" for="email">Email</label>
		<div class="col-sm-10">
			<form:input type="email" class="form-control" path="email"
				placeholder="Email address" autofocus="true" id="email"
				required="required" />
		</div>
	</div>
	<div class="form-group">
		<label class="col-sm-2 control-label" for="passwd">Password</label>
		<div class="col-sm-10">
			<form:input type="password" class="form-control" path="password"
				placeholder="Password" id="passwd" required="required" />
		</div>
	</div>
	<div class="form-group">
		<label class="col-sm-2 control-label" for="name">Name </label>
		<div class="col-sm-10">
			<form:input placeholder="Name" class="form-control" path="name"
				id="name" required="required" />
		</div>
	</div>
	<div class="form-group">
		<label class="col-sm-2 control-label" for="surname">Surname </label>
		<div class="col-sm-10">
			<form:input placeholder="Surname" class="form-control" path="surname"
				id="surname" required="required" />
		</div>
	</div>
	<div class="form-group">
		<label class="col-sm-2 control-label" for="location">Location
		</label>
		<div class="col-sm-10">
			<form:input placeholder="Location" class="form-control"
				path="location" id="location" required="required" />
		</div>
	</div>
	<div class="form-group">
		<label class="col-sm-2 control-label" for="skillIds">Skills</label>
		<div class="col-sm-10">
			<form:select placeholder="Skills" class="form-control"
				path="skillIds" id="skillIds">
				<c:forEach var="skill" items="${skills}">
					<form:option value="${skill.id}">${skill.name}</form:option>
				</c:forEach>
			</form:select>
		</div>
	</div>
	<div class="form-group">
		<label class="col-sm-2 control-label" for="UploadImage">Upload
			an Image </label>
		<div class="col-sm-10">
			<input type="file" name="profilePic" class="form-control file-button" />
		</div>
	</div>
	<button class="btn btn-lg btn-primary btn-block" type="submit">Sign
		Up</button>
</form:form>

</body>
</html>
